<template>
<el-dialog
      title="添加"
      :visible.sync="openDlg"
      width="80%"
      append-to-body
      destroy-on-close
    >
    <div class="diffName-year">
      <span>
        年份：
      </span>
      <el-date-picker
        v-model="yearStr"
        type="year"
        :format="'yyyy'"
        :value-format="'yyyy'"
        @change="yearStrChange"
        placeholder="选择年">
      </el-date-picker>
    </div>
    
    <el-table :data="tableData">
      <el-table-column label="奖学金名称" prop="typeName" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.typeName}}</span>
            <el-input
                v-if="row.optType == 'write'"
                size="mini"
                placeholder="请输入奖学金名称"
                v-model="row.typeName">
            </el-input>
        </template>
      </el-table-column>
      <el-table-column label="金额(元/人)" prop="bonusMoney" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.bonusMoney}}</span>
            <el-input
                v-if="row.optType == 'write'"
                size="mini"
                placeholder="请输入奖学金金额"
                v-model="row.bonusMoney">
            </el-input>
        </template>
      </el-table-column>
      <el-table-column label="名额(人)" prop="personNum" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.personNum}}</span>
            <el-input
                v-if="row.optType == 'write'"
                size="mini"
                placeholder="请输入奖学金名额"
                v-model="row.personNum">
            </el-input>
        </template>
      </el-table-column>
       <el-table-column label="是否二级学院可以导入配置" prop="isSet" width="180" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.isSet == '1'?"是":"否"}}</span>
            <el-radio-group 
              v-if="row.optType == 'write'" 
              v-model="row.isSet"
              >
              <el-radio :label='0'>否</el-radio>
              <el-radio :label='1'>是</el-radio>
            </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="奖项不可兼得" prop="isHaveBoth" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.isHaveBoth == '1'?"是":"否"}}</span>
            <el-radio-group 
              v-if="row.optType == 'write'" 
              v-model="row.isHaveBoth"
              >
              <el-radio :label='0'>否</el-radio>
              <el-radio :label='1'>是</el-radio>
            </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="四大组织" prop="orgFlag" :show-overflow-tooltip="true" align="center">
        <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.orgFlag == '1'?"是":"否"}}</span>
            <el-radio-group 
              v-if="row.optType == 'write'" 
              v-model="row.orgFlag"
              >
              <el-radio :label='0'>否</el-radio>
              <el-radio :label='1'>是</el-radio>
            </el-radio-group>
        </template>
      </el-table-column>
       <el-table-column label="顺序" prop="sort" align="center" width="150">
          <template slot-scope="{row}">
            <span v-if="row.optType == 'read'">{{row.sort}}</span>
            <el-input-number
                v-if="row.optType == 'write'"
                size="mini"
                :min="0"
                :max="9999"
                placeholder="请输入顺序"
                v-model="row.sort">
            </el-input-number>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.optType == 'read'"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.optType == 'write'"
            @click="handleSave(scope.row)"
          >保存</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row, scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 2px; text-align: center;">
        <el-button icon="el-icon-plus" @click="addType()" type="text">新增</el-button>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openDlg = false">取 消</el-button>
    </div>
</el-dialog>
</template>

<script>
import { 
    schoolScholarshipPlAdd
 } from "@/api/poorStudent-scholarship/plan.js";
import { max } from "moment";
export default {
    name:"schoolScholarshipAdd",
    data () {
        return {
            title: '',
            openDlg: false,
            tableData: [],
            yearStr: ''
        }
    },
    created () {
    },
    methods:{
        yearStrChange (val) {
          this.yearStr = val
        },
        open (yearStr) {
          this.yearStr = yearStr
          this.tableData = []
          this.openDlg = true
        },
        handleUpdate (rowdata) {
            rowdata.optType = 'write'
        },
        handleSave (rowdata) {
            rowdata.optType = 'read'
        },
        addType () {
            this.tableData.push({
                personNum: '',
                bonusMoney: "",
                typeName: '',
                isSet: 1,
                isHaveBoth: 1,
                orgFlag:0,
                sort: this.tableData.length + 1,
                optType: 'write',
                yearStr: this.yearStr
            })
        },
        handleDelete (row, index) {
            this.$modal
                .confirm('确认删除该数据吗？')
                .then(() => {
                  this.tableData = this.tableData.filter((item, i) => {
                    return index != i
                  })
                })
                .catch(() => {});
        },
        submitForm () {
            if (this.tableData.every((item) => {
              return item.personNum && item.bonusMoney && item.typeName && item.sort
            })) {
              schoolScholarshipPlAdd(this.tableData).then((response) => {
                this.$modal.msgSuccess("保存成功");
                this.openDlg = false;
                this.$emit("onSearch")
              });
            } else {
              this.$modal.msgWarning("检测到有奖学金名称、金额、名额未填写！");
            }
        },
    }

}
</script>
<style>
input[aria-hidden=true]{
        display: none !important;
    }
</style>

<style lang="scss" scoped>
    
    .planTotal{
        display: flex;
        font-size: 13px;
        color: #606266;
        &-left{
            margin-left: 30px;
        }
        &-right{
            margin-left: 20px;
        }
    }
    .diffName-year{
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      span{
        display: inline-block;
        width: 80px;
        text-align: right;
        margin-right: 5px;
      }
    }
</style>